

/**
 * 商城
*/
function mallModule(){
    /**
     * 头部导航栏
    */
    var mallMiddle = {
        data: function(){
            return {

            }
        },
        methods: {
            search: function(){
                var oSearch = document.querySelector('.detailed-search'),
                    oSearcDetailed = oSearch.querySelector('.head-search-detailed');
                    addBodyBg(.5)
                    oSearcDetailed.classList.add('lacement-detailed');
            },
            // 购物车
            catPost: function(){
                var d = document,
                    bodyContent = d.querySelector('.body-content'),
                    cat = d.querySelector('.cat-module');
                cat.setAttribute('data-scroll', 1);
                bodyContent.style.overflow = 'hidden';
                cat.classList.add('cat-module-js');
            }
        },
        template:  `
                <div class="search">
                    <div class="search-input">
                        <a href="javascript:;"><span class="iconfont icon-sousuo"></span></a>
                        <input type="text" placeholder="找你喜欢的商品" @click="search" />
                    </div>
                    <a href="javascript:;"><span class="iconfont icon-gouwuche" @click="catPost"></span></a>
                </div>
                `
    };
    var mallNavMiddle = {

        components: {
            'tem-navmiddle': mallMiddle
        },
        methods: {
            personal: function(){
                var app = document.querySelector('.app');
                var header = document.querySelector('.header');
                var headUserDetails = document.querySelector('.head-user-details');

                header.style.position = "absolute";
                headUserDetails.classList.add('head-user-details-js');
                addBodyBg(.4, function(node){
            
                    node.addEventListener('click', function(){
                        app.classList.remove('personal-js',);
                        remBodyBg(function(){
                            // 删除body背景 前的回调
                            headUserDetails.classList.remove('head-user-details-js');
                        });
                        var timer = setTimeout(function(){
                            app.style.transition = 'none';
                            clearTimeout(timer);
                        }, 400);
                    });
                });
                app.style.transition = 'left .4s';
                app.classList.add('personal-js');
            }
        },
        template: `
            <div class="header mall-header" id="header">
                <nav class="header-nav">
                    <div class="head-nav-img" @click="personal">
                        <a href="javascript:;"><img src="./images/index/user.jpg" /></a>
                        <!-- 左边个人相关--开始 -->
                    </div>
                    <tem-navmiddle></tem-navmiddle>
                    <div class="head-nav-news"><span class="iconfont icon-xinxi"></span></div>
                </nav>
            </div>
                `
    }



    /**
     * 菜单栏
    */
    var menu = {
        props: ['setGoods'],
        data: function(){
            return {
                menu: [
                    {title: '英雄', img: './page/images/mall/mall_hero_entry_icon.png'},
                    {title: '皮肤', img: './page/images/mall/mall_skin_entry_icon.png'},
                    {title: '其它', img: './page/images/mall/mall_guard_entry_icon.png'},
                    {title: '礼包', img: './page/images/mall/mall_gift_entry_icon.png'},
                    {title: '周边', img: './page/images/mall/mall_surrounding_entry_icon.jpg'}
                ],
                
            }
        },
        
        methods: {
            switchPage: function(index){
                var This = this;
                var d = document,
                    switchNode = d.querySelector('.goods-list-module');
                // 
                var goodsListClassify = document.querySelector('.goods-list-classify'),
                    goodsListClassifyChilds = goodsListClassify.querySelectorAll('a');
                    goodsListClassifyChilds.forEach(function(item){
                         item.className = '';
                    });
                goodsListClassifyChilds[index]. className = 'classify-style-js';
                
                if(index == 0){ // 英雄
                    // 页面切换动画
                    switchPageFn(true, {
                        node: switchNode,
                    });
                    var yingxiong = sessionStorage.getItem('yingxiong');
                    if(yingxiong){
                        yingxiong = JSON.parse(yingxiong);
                        This.$emit('get-goods', yingxiong);
                        return;
                    }  
                    This.reqData({
                        yingxiong: 12
                    });
                    
                }else if(index == 1){ // 皮肤

                    // 页面切换动画
                    switchPageFn(true, {
                        node: switchNode,
                    });
                    var pifu = sessionStorage.getItem('pifu');
                    if(pifu){
                        pifu = JSON.parse(pifu);
                        This.$emit('get-goods', pifu);
                        return;
                    };
                    This.reqData({
                        pifu: 11
                    });
                }
            },
            reqData: function(categoryId){
                var This = this;
                
                var key = Object.keys(categoryId);
                //var sessionGoods = sessionStorage.getItem('goods');
                //if(!sessionGoods){
                    addLoad(.3);
                    ajax({
                        url: './php/goods.php',
                        data: {
                            category: categoryId[key[0]]
                        },
                        method: 'post',
                        success: function(res){
                            remLoad(.3);
                            var res = JSON.parse(res);
                            
                            if(res.error == 0){
                                return console.error(res);
                            }
                            if(res.error == 1){
                                var data = res.data;
                                This.$emit('get-goods', data);
                                sessionStorage.setItem(key[0], JSON.stringify(data));
                                //console.log(dataArr);
                            }
                        }
                    });
            }
        },
        template: `
            <div class="menu" id="menu">
                <div class="menu-nav">
                    <ul>
                        <li v-for="(item, index) in menu" @click="switchPage(index)">
                            <a src="javascript:;">
                                <div class="menu-img">
                                    <img :src="item.img">
                                </div>
                                <span>{{ item.title }}</span>
                            </a>
                        </li>
                    </ul>
                </div> 
            </div>
                `
    };



    /**
     *最新上架 
    */
    var upshelf = {
        data: function(){
            return {
                newGoods: {
                    max: {name: '真实伤害 赛娜 音乐 巨星版', price: '11920', img: './images/yingxiong/1.jpg'},
                    min1: {name: '真实伤害 亚索 音乐 巨星版', price: '12150', img: './images/yingxiong/2.jpg'},
                    min2: {name: '真实伤害 艾克 音乐 巨星版', price: '14150', img: './images/yingxiong/3.jpg'}
                }
            }
        },
        template: `
                <div class="upshelf">
                    <div class="shelf">
                        <div class="shelf-top">
                            <h3>最新上架</h3>
                            <a class="shelf-all">全部</a>
                        </div>
                        <div class="shelf-con">
                            <div class="shelf-con-left">
                                <a href="javascript:;">
                                    <img :src="newGoods.max.img">
                                    <div class="shelf-con-left-text">
                                        <span>{{ newGoods.max.price }}</span>
                                        <span>{{ newGoods.max.name }}</span>
                                    </div>
                                </a>
                            </div>
                            <div class="shelf-con-right">
                                <a href="javascript:;">
                                    <img :src="newGoods.min1.img">
                                    <div class="shelf-con-right-text">
                                        <span>{{ newGoods.min1.price }}</span>
                                        <span>{{ newGoods.min1.name }}</span>
                                    </div>
                                </a>
                                <a href="javascript:;">
                                    <img :src="newGoods.min2.img">
                                    <div class="shelf-con-right-text">
                                        <span>{{ newGoods.min2.price }}</span>
                                        <span>{{ newGoods.min2.name }}</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                `
    };



    /**
     * 推荐英雄
    */
    var recommend = {
        data: function(){
            return {
                recData: [
                    {text: {h3: '战争女神 希维尔', p:{span1: '500', span2: '400'}, span: '版本强势'}, img:"./images/yingxiong/7.jpg"},
                    {text: {h3: '虚空之女 卡莎', p:{span1: '2500', span2: '6000'}, span: '大家都在买'}, img:"./images/yingxiong/8.jpg"},
                    {text: {h3: '皮城女警 凯特琳', p:{span1: '4500', span2: '6000'}, span: '大家都在买'}, img:"./images/yingxiong/6.jpg"},
                    
                ]
            }
        },
        template: `
                <div class="recommend">
                    <div class="rec-top"><h3>推荐英雄</h3></div>
                    <div class="rec-list">
                        <ul>
                            <li v-for="(item, index) in recData">
                                <a href="javascript:;">
                                    <img :src="item.img">
                                    <div class="rec-list-text">
                                        <h3>{{ item.text.h3 }}}</h3>
                                        <p><span>{{ item.text.p.span1 }}</span><span>{{ item.text.p.span2 }}</span></p>
                                        <span>{{ item.text.span }}</span>
                                    </div>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                </div>
                `
    };



    /**
     * 推荐皮肤
    */
    var recskin = {
        data: function(){
            return {
                recData: [
                    {text: {h3: '玉剑传说 无极', p:{span1: '4500', span2: ''}, span: ''}, img:"./images/pifu/9.jpg"},
                    {text: {h3: '寻龙炮手 崔丝塔纳', p:{span1: '4500', span2: ''}, span: ''}, img:"./images/pifu/6.jpg"},
                    
                ]
            }
        },
        template: `
                <div class="recskin">
                    <div class="rec-top"><h3>推荐皮肤</h3></div>
                    <div class="rec-list">
                        <ul>
                            <li v-for="(item, index) in recData">
                                <a href="javascript:;">
                                    <img :src="item.img">
                                    <div class="rec-list-text">
                                        <h3>{{ item.text.h3 }}}</h3>
                                        <p><span>{{ item.text.p.span1 }}</span><span>{{ item.text.p.span2 }}</span></p>
                                        <span>{{ item.text.span }}</span>
                                    </div>
                                </a>
                            </li>
                            
                        </ul>
                    </div>
                </div>
                `
    };



    // 页面整体
    var mallModuleData = {
        data: function(){
            return {
                setGoods: [],
                setGoodsDetails: {},
                setDetailsPay: [],
                setAddCat: {},
                setCatPay: []
            }
        },
        methods: {
            getGoods: function(data){
                //console.log(data);
                this.setGoods = data;
            },
            getGoodsDetails: function(data){
                //console.log(data)
                this.setGoodsDetails = data;
            },
            // 商品详情页 -> 购买页
            getDetailsPay: function(data){
                var arrData = [];
                arrData.push(data);
                this.setDetailsPay = arrData;
                //this.setDetailsPay = data;
            },
            // 添加购物车
            getAddCat: function(data){
                //console.log(data)
                //if(data){
                    //console.log(data)
                    this.setAddCat = data;
                //}
                //console.log( this.setAddCat)
                //console.log(data)
                //console.log(this.setGoodsDetails)
            },
            // 购物车 -> 购买页
            getCatPay: function(data){
                console.log(data)
                this.setCatPay = data;
                //console.log(this.setCatPat)
            }
        },
        components: {
            'mall-nav': mallNavMiddle, // 导航栏
            //'tem-banner': temBanner, // 轮播
            'tem-menu': menu, // 菜单栏
            'tem-upshelf': upshelf, // 最新上架 
            'tem-recommend': recommend, // 推荐英雄
            'tem-recskin': recskin, // 推荐皮肤
        
            'tem-goods-list': goodsListModule,  // 商品页面
            'tem-goods-details': goodsDetails,   // 商品详情页面
            'tem-pay': payModule,  // 支付页面
        },
        template: `
                <div>
                    <mall-nav></mall-nav>
                    <tem-banner></tem-banner>
                    <tem-menu v-on:get-goods="getGoods" v-bind:set-goods="setGoods"></tem-menu>
                    <tem-upshelf></tem-upshelf>
                    <tem-recommend></tem-recommend>
                    <tem-recskin></tem-recskin>
    
                    <search-details></search-details>
                    <nav-personal></nav-personal>
    
                    <tem-goods-list v-on:get-goods="getGoods" v-on:get-goods-details="getGoodsDetails" v-bind:set-goods="setGoods"></tem-goods-list>
                    <tem-goods-details v-bind:set-goods-details="setGoodsDetails"  v-on:get-details-pay="getDetailsPay" v-on:get-add-cat="getAddCat"></tem-goods-details>
                    <tem-pay v-bind:set-details-pay="setDetailsPay" v-bind:set-cat-pay="setCatPay"></tem-pay> 

                    <tem-cat v-on:get-cat-pay="getCatPay" v-bind:set-add-cat="setAddCat"></tem-cat>
                </div>
                `
    };
    return mallModuleData;

}


